<template>
  <el-dialog
    title="表格自定义列"
    :append-to-body='true'
    :visible.sync="SetColumndShow"
    width="880px"
    top="2%"
    :before-close="SetColumnClose"
    center
  >
    <div style="width: 838px; position: relative" class="column_table_div">
      <div class="Column_font clr_fff">(拖动整条可以调整行的前后顺序)</div>
      <el-table
        :data="tableData"
        border
        width="780px"
        height="500px"
        row-key="sortNo"
        align="center"
        ref="ColumnTable"
        highlight-current-row
        header-row-class-name="strong"
        @row-click="ColumnRowChange"
        @cell-dblclick="ColumncellChange"
      >
        <el-table-column
          v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="dropCol[index].prop"
          align="center"
          :label="item.label"
        >
          <template slot-scope="scope">
            <p v-if="scope.column.property == 'checked'">
              <i
                class="iconfont f16 clr_main"
                v-show="scope.row[scope.column.property]"
              >&#xeb23;</i>
              <i
                class="iconfont f16 clr_666"
                v-show="!scope.row[scope.column.property]"
              >&#xeb22;</i>
            </p>
            <p v-else>
              <span v-show="!scope.row.disabled">{{
                scope.row[scope.column.property]
              }}</span>
              <el-input
                v-model="scope.row[scope.column.property]"
                v-show="scope.row.disabled"
              ></el-input>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer tr mt20">
        <el-button size="small" @click="SetColumnClose">关闭</el-button>
        <el-button type="primary" size="small" @click="ReSetColumn">恢复默认</el-button>
        <el-button type="primary" size="small" @click="SetColumnSave">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Sortable from "sortablejs";
export default {
  name: "SetColumns",
  data() {
    return {
      SetColumndialog: false,
      col: [
        {
          label: "显示列",
          prop: "checked",
        },
        {
          label: "列名",
          prop: "dataKey",
        },
        {
          label: "列宽",
          prop: "dataValue",
        },
      ],
      dropCol: [
        {
          label: "显示列",
          prop: "checked",
        },
        {
          label: "列名",
          prop: "dataKey",
        },
        {
          label: "列宽",
          prop: "dataValue",
        },
      ],
      tableData: [],
    };
  },
  methods: {
    // 列拖拽
    rowDrop() {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector(
        ".column_table_div  .el-table__body-wrapper  tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        //  指定父元素下可被拖拽的子元素
        draggable: ".el-table__row",
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
    ColumnRowChange(row, event, column) {
      var _this = this;
      var Old = _this.tableData;
      Old.forEach((item) => {
        if (item.columnField === row.columnField) {
          item.checked = !item.checked;
        }
      });
      _this.tableData = Old;
    },
    ColumncellChange(row, event, column) {
      var _this = this;
      var Old = _this.tableData;
      Old.forEach((item) => {
        if (item.columnField === row.columnField) {
          item.disabled = !item.disabled;
        }
      });
      _this.tableData = [];
      _this.tableData = Old;
    },
    ReSetColumn() {
      var _this = this;
      var Arr = _this.defaultColumn;
      
      console.log( '默认数据不对哦',Arr);
      var newArr = [];
      Arr.forEach((item) => {
        // var visibility = 1;
        var oneitem = {
          id: item.id,
          owner: item.owner,
          field_code: item.columnField || item.column_field || item.field_code,
          field_name: item.dataKey || item.field_name,
          column_width: item.dataValue || item.column_width,
          essential: item.essential,
          visibility: item.visibility,
          fixed: item.fixed,
          sort: item.sort,
          organization_id: item.organization_id,
          department_id: item.department_id,
          user_id: item.user_id,
          system_instance_id: item.system_instance_id,
        };
        newArr.push(oneitem);
      });
      var data = {
        views: newArr,
        platform_service: _this.platformService,
      };
      _this.$pacsApi.pacsApi.SaveColumnCustom(data).then((res) => {
        if (res.code === 0) {
          _this.$emit("SetColumndBack", true);
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
    getColumn() {
      var _this = this;
      var data = {
        owner: _this.owner,
        platform_service: _this.platformService,
      };
      _this.$pacsApi.pacsApi.getColumnCustom(data).then((res) => {
        if (res.code === 0) {
          if (res.data) {
            var Arr = [];
            if (res.data.length > 0) {
              Arr = res.data;
              Arr = Arr.sort((a, b) => {
                return a.sort - b.sort;
              });
            } else {
              Arr = _this.defaultColumn;
            }
            var NewArr = [];
            Arr.forEach((item) => {
              var checked = false;
              if (item.visibility) {
                checked = true;
              }
              item.disabled = false;
              item.checked = checked;
              item.sortNo = item.sort;
              item.columnField = item.field_code;
              item.dataKey = item.field_name;
              item.dataValue = item.column_width;
              NewArr.push(item);
            });
            _this.tableData = NewArr;
          }
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
    SetColumnClose() {
      this.$emit("SetColumndBack", "");
    },
    SetColumnSave() {
      var _this = this;
      var Arr = _this.tableData;
      console.log(Arr);
      var newArr = [];
      Arr.forEach((item) => {
        var visibility = 0;
        if (item.checked) {
          visibility = 1;
        }
        var oneitem = {
          id: item.id,
          owner: item.owner,
          field_code: item.columnField || item.column_field,
          field_name: item.dataKey || item.field_name,
          column_width: item.dataValue || item.column_width,
          essential: item.essential,
          visibility: visibility,
          fixed: item.fixed,
          sort: item.sort,
          organization_id: item.organization_id,
          department_id: item.department_id,
          user_id: item.user_id,
          system_instance_id: item.system_instance_id,
        };
        newArr.push(oneitem);
      });
      var data = {
        views: newArr,
        platform_service: _this.platformService,
      };
      _this.$pacsApi.pacsApi.SaveColumnCustom(data).then((res) => {
        if (res.code === 0) {
          _this.$emit("SetColumndBack", true);
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
  },
  props: {
    owner: {},
    SetColumndShow: {},
    defaultColumn: {},
    // 云PACS = 1, 远程医疗 = 2, 云存储 = 3, 云PACS影像 = 4
    platformService: {
      default: 4,
    },
  },
  watch: {
    SetColumndShow(val) {
      if (val) {
        this.getColumn();
        setTimeout(() => {
          this.rowDrop();
        }, 0);
      }
    },
  },
  mounted() {},
};
</script>
<style>
.Column_font {
  position: absolute;
  top: -53px;
  left: 100px;
}
.column_table_div .el-table td {
  padding: 0px;
  height: 40px;
  line-height: 40px;
}
.column_table_div /deep/ .current-row .clr_main {
  color: #fff;
}
.el-icon-s-tools{
  color: #0a70b0;
  font-size: 20px;
  cursor: pointer;
}
.el-table__fixed, .el-table__fixed-right {
  box-shadow: none;
}
</style>
